//这是根组件
import React from 'react'

//导入路由组件
import {HashRouter,Route,Link} from 'react-router-dom' 

//导入路由相关的组件页面
import homeContainer from './components/home/homeContainer.jsx'
import movieContainer from './components/movie/movieContainer.jsx'
import aboutContainer from './components/about/aboutContainer.jsx'

//导入ant design
import { Layout, Menu} from 'antd';

// //导入模块化的样式
import styles from './css/app.module.css';
const { Header, Content, Footer } = Layout;

export default class app extends React.Component{
  constructor(props){
    super(props)
    this.static={}
  }
  render(){
    return <HashRouter>
      <Layout className="layout" style={{height:'100%'}}>
        {/* 头部区域 */}
        <Header>
          <div className={styles.logo} />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[window.location.hash.split('/')[1]]}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="home">
              <Link to="/home">首页</Link>
            </Menu.Item>
            <Menu.Item key="movie">
              <Link to="/movie/in_theaters/1">电影</Link>
            </Menu.Item>
            <Menu.Item key="about">
              <Link to="/about">关于</Link>
            </Menu.Item>
          </Menu>
        </Header>
        
        {/* 内容区域 */}
        <Content style={{backgroundColor:'#fff',flex:1}}>
          <Route path="/home" component={homeContainer}></Route>
          <Route path='/movie' component={movieContainer}></Route>
          <Route path='/about' component={aboutContainer}></Route>
        </Content>
        
        {/* 底部区域 */}
        <Footer style={{ textAlign: 'center' }}>
          传智播客 ©2019 黑马程序员
        </Footer>
      </Layout>
    </HashRouter> 
  }
}